<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {# 浏览器标签题 #}
        {% endblock %}
    </title>
    {% load static %}
    <script src="{% static 'jquery-3.4.1/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}"> <!--符号字体-->
    {# 左侧边栏 #}
    <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}"/>
    <link href="{% static 'plugins/css/icons.min.css' %}" rel="stylesheet" type="text/css"/>
    <script src="{% static 'js/sidebar.js' %}"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    {% block js %}
    {# js链接引入 #}
    {% endblock %}
    <style>
        .top-a {
            font-size: 18px;
            font-family: 华文行楷;
            color: #3379b6;
            font-weight: 550;
            float: right;
            margin-right: 25px;
        }
        .site-name {
            display: inline-block;
            height: 10px;
            margin-left: 110px;
            font-weight: 600;
            color: #3379b6;
            font-family: 华文行楷;
            font-size: 25px;
        }
        .site-name2 {
            display: none;
        }
        {% block css %}
        {# css #}
        {% endblock %}
    </style>
</head>
<body>

{#侧边栏#}
<div class="page" id="app">
    <div class="nav-left" v-show="navLeftFlag" ref="navLeft">
        <div class="LogoName">
            <span style="font-size: 23px">🌟</span>
            {% block usernames %}
                {# 站点主人名#}
            {% endblock %}
        </div>
        <div class="navDiv">
            <div class="navName">导航</div>
            <div class="nav-list">
                <ul>
                    {# 加载left.py文件 #}
                    {% load mylefttag %}
                    {# 再使用自定义inclusion_tag #}
                    {% left_inclusion_tag username %}

                    {% block left_list %}
                    {# 这里面写文章分类标签等#}
                    {% endblock %}
                </ul>
            </div>
        </div>
    </div>
    {# 侧边栏点击按钮隐藏/出现#}
    <div class="nav-right" ref="navRight">
        <div class="nav-top">
            <button type="button" class="btn btn-primary btn-sm hiddenBtn btn1" style="line-height: 10px;"
                    @click="isShowLeft">
                <i class="bx bx-grid-alt" style="font-size: 16px;"></i>
            </button>
            <div class="site-name">
                <div class="site-name2">
                    <span>⛅</span>
                    {% block site_name %}
                    {# 站点名称 #}
                    {% endblock %}
                </div>
            </div>
            <a href="{% url 'backed_name' %}" class="top-a">后台管理</a>
            <a href="#" class="top-a">订阅</a>
            <a href="{% url 'home_name' %}" class="top-a">首页</a>
        </div>
        {#主体内容#}
        <div class="content-page" ref="cPage">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-7 col-md-offset-1">
                        {% block body-left %}
                        {# 主体内容左边部分 #}
                        {% endblock %}
                    </div>

                    <div class="col-md-3">
                        {% block body-right %}
                            {# 主题内容左边部分 #}
                            <div style="height: 500px;width: 100%;background-color: #1b6d85"></div>
                        {% endblock %}
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    {# 侧边栏 #}
    $(function () {
        let navflag = false;
        $('.nav-tab').click(function () {
            $(this).siblings().each(function () {
                $(this).removeClass('a_active');
                $(this).find('.nav-box').css('height', '0')
                //关闭右侧箭头
                if ($(this).attr('class').indexOf('nav-ul') != -1) {
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).removeClass('nav-show')
                }
            })
            //当前选中
            $(this).addClass('a_active')
            $(this).find('.li-a').addClass('active')
            // 打开右侧箭头
            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
            $(this).addClass('nav-show')
        })
        /* 二级菜单a点击事件 */
        $(".li-a-a").click(function () {
            $(".li-a-a").each(function () {
                $(this).removeClass('active-li-a');
            })
            $(this).addClass('active-li-a');
        })

    })
    const vue = new Vue({
        el: '#app',
        data: {
            navLeftFlag: true
        },
        methods: {
            isShowLeft() {
                if (this.navLeftFlag) {
                    this.$refs.navRight.style.paddingLeft = '0px'
                    this.$refs.cPage.style.left = '0px';
                    this.navLeftFlag = false;
                } else {
                    this.$refs.navRight.style.paddingLeft = '240px';
                    this.$refs.cPage.style.left = '240px';
                    this.navLeftFlag = true;
                }
            }
        }
    })

    {# 右侧边栏淡入淡出特效 #}
    $('.btn1').click(function () {
        $('.site-name2').fadeToggle(500);
    })

    {% block script_left %}
        {# js代码 #}
    {% endblock %}
</script>
</body>
</html>